<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<html>
<head>
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/layui.css">
    <script type="text/javascript" src="js/layui.js"></script>
</head>
<body>
    <jsp:include page="header.jsp"></jsp:include>
    <style>
        .demo-login-container{width: 320px; margin: 21px auto 0;}
        .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
        .container{
            background-image: url("images/LoginImg22.png"),url("images/LoginImg33.png");
            background-position: 0 100%,100% 100%;
            background-repeat: no-repeat,no-repeat;
            background-size: 25%;
            width: 70%;
            border-radius: 20px;
            box-shadow: 0 0 10px 2px #0c0c0c;
        }
        .main{
            margin: auto;
            display: flex;
            justify-content: center;
            margin-top: 10vh;
        }
    </style>

    <div class="main">
        <div class="container">
            <form class="layui-form" action="/videoweb/UserLoginServlet" method="POST">
                <c:if test="${!empty msg }">
                    <h2 style="text-align: center;color: #ff5722;<c:if test="${msg=='注册成功!'}">color: #16b777</c:if>">${msg }</h2>
                </c:if>
                <div class="demo-login-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                        <a href="form.html#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login" >登录</button>
                    </div>
                    <div class="layui-form-item demo-login-other">
                        <label>社交账号登录</label>
                        <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
                        或 <a href="user_register.jsp">注册帐号</a></span>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script>
        layui.use(function(){
            var form = layui.form;
            var layer = layui.layer;
            var pwdjs = document.getElementsByName("password")[0];
            var container = document.getElementsByClassName("container")[0];

            pwdjs.onfocus = function (){
                container.style.backgroundImage="url('images/22_close.png'),url('images/33_close.png')";
            }
            pwdjs.onblur = ()=>{
                container.style.backgroundImage="url('images/LoginImg22.png'),url('images/LoginImg33.png')";
            }
            // 提交事件
            form.on('submit(demo-login)', function(data){
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // layer.alert(JSON.stringify(field), {
                //     title: '当前填写的字段值'
                // });
                // 此处可执行 Ajax 等操作
                // …
                // return false; // 阻止默认 form 跳转
            });
        });

    </script>
</body>
</html>
